<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>树形表格 - layui</title>
    <link rel="stylesheet" href="./assets/dist/css/layui.css" />
  </head>
  <body class="layui-padding-5">
    <table class="layui-hide" id="test"></table>

    <script type="text/html" id="TPL-treeTable-demo">
      <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm" lay-event="reloadData">重载数据</a>
      </div>
    </script>

    <script src="./assets/dist/layui.js"></script>
    <script>
      layui.use(['treeTable', 'dropdown', 'layer'], () => {
        var treeTable = layui.treeTable;
        var dropdown = layui.dropdown;
        var layer = layui.layer;

        // 渲染
        var inst = treeTable.render({
          elem: '#test',
          url: './assets/json/treeTable/demo-1.json',
          maxHeight: '700px',
          toolbar: '#TPL-treeTable-demo',
          tree: {
            customName: {
              name: 'name',
            },
            view: {
              iconLeaf: '',
            },
          },
          cols: [
            [
              { type: 'checkbox', fixed: 'left' },
              { type: 'numbers', fixed: 'left' },
              {
                field: 'id',
                title: 'ID',
                width: 145,
                sort: true,
                fixed: 'left',
                totalRow: '合计：',
              },
              { field: 'name', title: '用户名', width: 180, fixed: 'left' },
              { field: 'experience', title: '积分', width: 90, sort: true },
              { field: 'sex', title: '性别', width: 80, sort: true },
              { field: 'score', title: '评分', width: 80, sort: true },
              { field: 'city', title: '城市', width: 150 },
              { field: 'description', title: '描述', minWidth: 200 },
              { field: 'createTime', title: '创建时间', width: 170 },
            ],
          ],
          page: true,
        });

        // 表头工具栏工具事件
        treeTable.on('toolbar(' + inst.config.id + ')', (obj) => {
          var config = obj.config;
          var tableId = config.id;
          var status = treeTable.checkStatus(tableId);
          if (obj.event === 'reloadData') {
            treeTable.reloadData(tableId, {
              scrollPos: 'fixed',
            });
          }
        });
      });
    </script>
  </body>
</html>
